<template>
	<div class="user-detail-container" v-loading="loading">
		<!-- 头部 -->
		<el-card class="mb-6">
			<div class="header-content">
				<h3 class="user-title">用户昵称：{{ userData.nickname }}</h3>
				<div class="action-buttons">
					<el-button type="primary" :icon="Edit" @click="handleEdit">
						编辑用户
					</el-button>
					<el-button type="primary" :icon="Edit" @click="handleRoleEdit">
						管理用户角色
					</el-button>
					<el-button :icon="Switch" @click="handleLock">
						{{ userData.isLocked ? '解锁用户' : '锁定用户' }}
					</el-button>
				</div>
			</div>

			<el-card shadow="never" class="mt-4">
				<div class="basic-info">
					<div class="info-item">
						<span class="info-label">用户ID</span>
						<span class="info-value">{{ userData.id }}</span>
					</div>
					<div class="info-item">
						<span class="info-label">手机号码</span>
						<span class="info-value">{{ userData.phone }}</span>
					</div>
					<div class="info-item">
						<span class="info-label">角色</span>
						<span class="info-value">{{ userData.roleName || "无角色" }}</span>
					</div>
				</div>
			</el-card>
		</el-card>

		<!-- Main Content -->
		<div class="main-content">
			<!-- Left Content (8 columns) -->
			<div class="left-content">
				<!-- 头像区 -->
				<el-card>
					<template #header>
						<div class="card-header">
							<span>用户头像</span>
						</div>
					</template>
					<div class="avatar-container">
						<el-image v-if="userData.avatar" :src="userData.avatar" fit="cover" class="avatar-preview" />
						<el-empty v-else description="暂无用户头像" :image-size="100" />
					</div>
				</el-card>

				<!-- 用户信息 -->
				<el-card class="mt-6">
					<template #header>
						<div class="card-header">
							<span>用户信息</span>
						</div>
					</template>

					<div class="user-info">
						<div class="info-row">
							<div class="info-col">
								<span class="info-label">推荐人手机号</span>
								<span class="info-value">
									{{ userData.recommendedByPhone || '无' }}
								</span>
							</div>
						</div>
					</div>
				</el-card>
			</div>

			<!-- 系统信息 -->
			<div class="right-sidebar">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>系统信息</span>
						</div>
					</template>

					<div class="system-info">
						<div class="info-item">
							<span class="info-label">创建时间</span>
							<span class="info-value">{{ userData.createdAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">更新时间</span>
							<span class="info-value">{{ userData.updatedAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">账号状态</span>
							<el-tag :type="statusTagType" size="small">
								{{ statusText }}
							</el-tag>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'UserDetailView'
	};
</script>

<script setup>
	import {
		getUserinfo,
		lockedUser,
		unlockUser
	} from '@/api/userManager.js'
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		Edit,
		Switch
	} from '@element-plus/icons-vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const route = useRoute()
	const router = useRouter()
	const loading = ref(false)
	const userId = ref(route.params.id)
	const userData = ref({})

	/**
	 * 状态标签类型
	 */
	const statusTagType = computed(() => {
		if (userData.value.isLocked) return 'danger'
		return 'success'
	})

	/**
	 * 状态标签文本
	 */
	const statusText = computed(() => {
		return userData.value.isLocked ? '已锁定' : '正常'
	})

	/**
	 * 获取用户详情
	 */
	const fetchUserData = async () => {
		loading.value = true
		try {
			const res = await getUserinfo(userId.value)
			if (res.data) {
				userData.value = res.data
			}
		} catch (error) {
			ElMessage.error('获取用户详情失败')
		} finally {
			loading.value = false
		}
	}

	// 获取用户数据
	onMounted(() => {
		fetchUserData()
	})

	/**
	 * 处理编辑
	 */ 
	const handleEdit = () => {
		router.push(`/user/edit/${userId.value}`)
	}
	/**
	 * 处理用户角色编辑
	 */
	const handleRoleEdit= () => {
		router.push(`/user/roleUser/edit/${userId.value}`)
	}

	// 处理锁定/解锁
	const handleLock = async () => {
		const action = userData.value.isLocked ? '解锁' : '锁定'

		try {
			await ElMessageBox.confirm(
				`确定要${action}该用户吗？`,
				`${action}用户`, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)

			loading.value = true
			// 根据当前状态调用不同的API
			if (userData.value.isLocked) {
				await unlockUser(userId.value)
			} else {
				await lockedUser(userId.value)
			}

			ElMessage.success(`${action}操作成功`)
			// 重新获取数据以更新状态
			await fetchUserData()
		} catch (error) {
			if (error !== 'cancel') {
				ElMessage.error(`${action}操作失败: ${error.message || '未知错误'}`)
			} else {
				ElMessage.info('已取消操作')
			}
		} finally {
			loading.value = false
		}
	}
</script>

<style scoped>
	.user-detail-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
		overflow-y: auto;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-title {
		font-size: 20px;
		font-weight: 600;
		color: #303133;
		margin: 0;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.basic-info {
		display: flex;
		gap: 24px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-label {
		font-size: 14px;
		color: #909399;
	}

	.info-value {
		font-size: 16px;
		font-weight: 500;
		color: #303133;
	}

	.main-content {
		flex: 1;
		display: flex;
		gap: 20px;
		min-height: 0;
	}

	.left-content {
		flex: 2;
		min-width: 0;
	}

	.right-sidebar {
		flex: 1;
		position: relative;
		max-height: calc(100vh - 200px);
	}

	.avatar-container {
		height: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f7fa;
		border-radius: 4px;
		overflow: hidden;
	}

	.avatar-preview {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.card-header {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.info-row {
		display: flex;
		gap: 16px;
	}

	.info-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.system-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.mt-6 {
		margin-top: 24px;
	}

	.mb-6 {
		margin-bottom: 24px;
	}
</style>